<template>
  <!-- 现在用的页面——外观/内饰选择 -->
  <page-loading :show="showPage">
    <view class="content">
      <view class="ppbox">
        <view class="colortext">
          请选择下列外观/内饰组合配置您的车源信息
        </view>
        <view class="bjcolor" v-show="xedColorList.length>0">
          <view class="Extecolor">
            <view class="kuang1 flex flex-ai-c" v-for="(item, index) in xedColorList" :key="index">
              <view class="kuang2 flex flex-ai-c">
                <view class="flex flex-ai-c">
                  <view class="white" :style="{background:item.outerColour.colorCoding}"></view>
                  <view class="kuangtext">
                    {{item.outerColour.color}}
                  </view>
                </view>
                <view class="flex flex-ai-c">
                  <view class="kuang21" v-if="item.inColour.neiColor.length == 1">
                    <view class="white1" :style="{background:item.inColour.neiColor[0]}"></view>
                  </view>
                  <view class="kuangdoubu" v-if="item.inColour.neiColor.length == 2">
                    <view class="white4" style="border-radius: 20rpx 20rpx 0rpx 0rpx;" :style="{background:item.inColour.neiColor[0]}"></view>
                    <view class="white4" style="border-radius: 0rpx 0rpx 20rpx 20rpx;" :style="{background:item.inColour.neiColor[1]}"></view>
                  </view>
                  <view class="kuangtext">
                    {{item.inColour.color}}
                  </view>
                </view>
              </view>
              <view class="kuangimg" @click="tagClick(item,index)">
                <i-icon icon="iconfabu-cha" type="single" size="30rpx" color='#999999'></i-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="containepp">
          <view class="num">外观颜色</view>
          <view class="bjcolor" style="height: 100%;">
            <view class="Extecolor1">
              <view class="kuang11" v-for="(item, index) in wgColorList" :key="index" @tap="wgcolorbtn(item)">
                <view class="kuang21 flex flex-ai-c flex-jc-c">
                  <view class="white1" :style="{background:item.colorCoding}"></view>
                </view>
                <view class="kuangtext1">
                  {{item.color}}
                </view>
                <view class="xuanzhong" v-show="xzwgcolor && item.color==xzwgcolor.outerColour.color">
                  <i-icon class="icongouxuan1" icon="icongouxuan1" type="single" size="50rpx" color='#ec5e03'></i-icon>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="containepp">
          <view class="num">内饰颜色</view>
          <view class="bjcolor" style="height: 100%;">
            <view class="Extecolor1">
              <view class="kuang11" v-for="(item, index) in nsColorList" :key="index" @tap="nscolorbtn(item)">
                <view class="kuang21 flex flex-ai-c flex-jc-c" v-if="item.neiColor.length == 1">
                  <view class="white1" :style="{background:item.neiColor[0]}"></view>
                </view>
                <view class="kuangdoubu" v-if="item.neiColor.length == 2">
                  <view class="white4" style="border-radius: 29rpx 29rpx 0rpx 0rpx;" :style="{background:item.neiColor[0]}"></view>
                  <view class="white4" style="border-radius: 0rpx 0rpx 29rpx 29rpx;" :style="{background:item.neiColor[1]}"></view>
                </view>
                <view class="kuangtext1">
                  {{item.color}}
                </view>
                <view class="xuanzhong" v-show="xzwgcolor && item.color==xzwgcolor.inColour.color">
                  <i-icon icon="icongouxuan1" type="single" size="50rpx" color='#ec5e03'></i-icon>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view style="height: 160rpx;"></view>
        <view class="quedingbtnhs" v-if="!xedColorList.length>0" @click="wgnescolor(1)">
          <view class="showco">确认</view>
        </view>
        <view class="quedingbtncolor" v-else @click="wgnescolor(0)">
          <view class="showco">确认</view>
        </view>
      </view>
    </view>
  </page-loading>
</template>


<script src="./exteriorInterior.js"></script>
<style lang="scss" scoped>
  @import './exteriorInterior.scss';
</style>
